<template>
  <view class="box">
    <view class="top">
      <!-- 第一部分开始 -->
      <!-- 第一部分结束 -->
      <view class="center" v-for="(item,index) in ge" :key="index">
        <view class="center-left">
          <image :src="item.img" mode="scaleToFill" />
        </view>
        <!-- 第二部分 -->
        <view class="center-right">
          <view class="p1">{{ item.text2 }}</view>
          <view class="p2">{{ item.text3 }}</view>
          <view class="p3">
            <text class="text1"><!--￥--></text>￥{{ item.pr }}
            <text class="text2">×1</text>
          </view>
        </view>
      </view>
      <!-- djiai  -->
      <view class="foot">
        <view class="two" v-for="item in list" :key="item.id">
          <view class="three">
            <text class="text23">{{ item.text1 }}</text> 
            <text class="text3">{{ item.price }}<text v-if="item.ge=item.ge" style="color: red;padding-left: 15rpx;">{{ item.ge }}</text></text>
          </view>
        </view>
        <view class="four">
          <view class="text5">备注</view>
          <view class="text4"
            ><input
              type="text"
              placeholder="请输入备注"
              style="text-align: right"
          /></view>
        </view>
      </view>
      <!-- djsij  -->
    </view>
    <view class="pay">
      <view class="pay1">
        <view class="pay1-left">
          <image
            src="../../static/微信.png"
            mode="scaleToFill"
          />
          <view class="pay1-left-rihgt">微信支付</view>
        </view>
        <view class="pay1-right">
          <uv-radio-group>
            <uv-radio name="wei"></uv-radio>
          </uv-radio-group>
        </view>
      </view>
      <!-- 支付宝 -->
      <view class="pay1">
        <view class="pay1-left">
          <image
            src="../../static/支付宝.png"
            mode="scaleToFill"
          />
          <view class="pay1-left-rihgt">支付宝</view>
        </view>
        <view class="pay1-right">
          <uv-radio-group>
            <uv-radio name="zhi"></uv-radio>
          </uv-radio-group>
        </view>
      </view>
      <!-- 余额 -->
      <view class="pay1">
        <view class="pay1-left">
          <image
            src="../../static/余额.png"
            mode="scaleToFill"
          />
          <view class="pay1-left-rihgt">余额</view>
        </view>
        <view class="pay1-right">
          <uv-radio-group>
            <uv-radio name="yue"></uv-radio>
          </uv-radio-group>
        </view>
      </view>
      <!-- 结束 -->
    </view>
    <!-- 底部导航 -->
    <view class="bottom">
      <view class="bottom-bottom">
        <view class="p3"
          ><text style="color: black">合计：</text>
          <text class="text1"><!--￥--></text>￥890.00
        </view>
        <view class="jiesuan"><button>立即支付</button> </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
const list = ref([
  { id: 1, text1: "工时费", price: "￥100",ge:'选择折扣券'},
  { id: 2, text1: "实付金额", price: "￥539" },
])
const ge=ref([{
  text2:'美孚(Mobil)金装美孚1号 全合...',text3:'全合成：4L',pr:'439.00',img:'../../static/jiyou1.jpg'
},
{
  text2:'驾驰/THINKAUTO 放油螺栓...',text3:'全合成：4L',pr:'11.50',img:'../../static/jiyou3.jpg'
}])
</script>

<style lang="scss">
.box {
  width: 100%;
  height: 100vh;
  background-color: #f5f5f5;

  .bottom {
    width: 100%;
    display: flex;
    background-color: #ffffff;
    margin: auto;
    margin-top: 50px;
    position: fixed;
    bottom: 0;

    .bottom-bottom {
      width: 100%;
      display: flex;
      margin-top: 15px;

      .p3 {
        width: 70%;
        margin-top: 10px;
        color: red;
        height: 20px;
      }

      button {
        background-color: #fc4424;
        color: white;
        border-radius: 100px;
        height: 40px;
        line-height: 40px;
      }
    }
  }

  .top-top {
    width: 90%;
    margin: auto;
    padding: 2%;
    background-color: #ffffff;
    border-radius: 10rpx;

    .top-top1 {
      width: 90%;
      color: #b4b4b4;
    }

    .top-content {
      margin-top: 10px;
      width: 100%;
      display: flex;
      justify-content: space-between;

      .top-content2 {
        color: #999999;
      }
    }
  }

  .top-bottom {
    margin-top: 10px;
  }

  .pay {
    width: 95%;
    margin: auto;
    background-color: #ffffff;
    border-radius: 5px;
    margin-top: 10px;

    .pay1 {
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #f5f5f5;

      .pay1-right {
        margin-top: 10px;
      }

      .pay1-left {
        width: 70%;
        height: 40px;

        display: flex;
      }

      .pay1-left-rihgt {
        width: 80%;
        margin-left: 15px;
      }

      .pay1-left image {
        width: 10%;
        height: 27px;
        margin-left: 15px;
      }
    }
  }

  .top {
    width: 90%;
    margin: auto;
    padding: 2%;
    margin-top: 10px;
    background-color: #ffffff;
    border-radius: 10rpx;

    .center {
      width: 100%;
      display: flex;
      justify-content: space-between;

      .center-left {
        width: 28%;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .center-right {
        width: 70%;

        .p1 {
          font-size: 30rpx;
        }

        .p2 {
          margin-top: 3%;
          font-size: 25rpx;
          color: #c2c2c2;
        }

        .p3 {
          margin-top: 5%;
          font-size: 45rpx;
          color: red;

          .text1 {
            font-size: 15px;
            color: red;
            font-weight: bold;
          }

          .text2 {
            font-size: 25rpx;
            color: #c2c2c2;
          }
        }
      }
    }
  }

  .four {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding-left: 1.4%;
  }

  .foot {
    width: 90%;
    margin: auto;
    margin-top: 3%;
    background-color: #ffffff;
    border-radius: 10rpx;
    padding: 2%;
    padding-bottom: 4%;

    .two {
      padding: 2%;
      display: flex;
      justify-content: space-between;

      .three {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .text23 {
          color: #676767;
        }

        .text3 {
          margin-left: 3%;
          color: #383838;
        }
      }
    }
  }
}
</style>
